<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/css/reset.css">
    <link rel="stylesheet" href="./assets/css/detail.css">
    <link rel="stylesheet" href="./assets/css/swiper-bundle.min.css">
</head>

<body>
    <!-- 导航 -->
    <div class="top">
        <div>详情</div>
    </div>
    <!-- 轮播图的优惠券 -->
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./assets/images/hotel1.jpg" alt=""></div>
            <div class="swiper-slide"> <img src="./assets/images/hotel2.jpg" alt=""></div>
            <div class="swiper-slide"> <img src="./assets/images/hotel3.jpg" alt=""></div>
        </div>
        <div class="swiper-pagination"></div>
    </div>

    <div class="detail_top">
        <div id="intro" class="intro">
            <div class="title">暑假特价房</div>
            <div class="betwee">
                <div class="left">
                    <span>WIFI</span>
                    <span>吹风机</span>
                    <span>空调</span>
                    <span>有浴缸</span>
                </div>
            </div>
            <div class="title">简介简介</div>
        </div>
        <div id="comment" class="comment">
            <div class="title">评价</div>
            <div class="rate-list-item">
                <div class="item-content">
                    <div class="content-prefix">
                        <div class="ratelist">
                            <div class="image">
                                <img src="./assets/images/avatar.png" alt="">
                            </div>
                            <p class="nickname">张三</p>
                        </div>
                    </div>
                    <div class="content-main">
                        <div class="rate">
                            <img src="./assets/images/rate.png" alt="">
                            <img src="./assets/images/rate.png" alt="">
                            <img src="./assets/images/rate.png" alt="">
                            <img src="./assets/images/rate.png" alt="">
                            <img src="./assets/images/rate.png" alt="">
                        </div>
                        <div class="item-description">
                            <p>房间采光不错,卫生也搞的挺好的,房间旁边是个校园,足够安静,对于我这个对睡眠质量要求比较高的人来说,感觉能够了</p>
                            <p class="item-time">2024-03-14 10:53:56</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="rate-list-item">
                <div class="item-content">
                    <div class="content-prefix">
                        <div class="ratelist">
                            <div class="image">
                                <img src="./assets/images/avatar.png" alt="">
                            </div>
                            <p class="nickname">张三</p>
                        </div>
                    </div>
                    <div class="content-main">
                        <div class="rate">
                            <img src="./assets/images/rate.png" alt="">
                            <img src="./assets/images/rate.png" alt="">
                            <img src="./assets/images/rate.png" alt="">
                            <img src="./assets/images/rate.png" alt="">
                            <img src="./assets/images/rate.png" alt="">
                        </div>
                        <div class="item-description">
                            <p>酒店的地理位置非常好，就在河畔，景色非常优美。酒店的服务和设施也非常周到和完备，员工们非常专业，让我们感到非常安全和舒适。酒店的地理位置非常好，就在河畔，景色非常优美。酒店的服务和设施也非常周到和完备，员工们非常专业，让我们感到非常安全和舒</p>
                            <p class="item-time">2024-03-14 10:53:56</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 更多评价 -->
            <div class="divider-horizontal">
                <div class="divider-content">
                    <a href="hotel-rate.html">更多评价内容</a>
                </div>
            </div>
        </div>
        <div class="notesin">
            <div class="title">预订须知</div>
            <div class="item">
                <span class="tips">预订房型：</span>
                <span>新房特惠</span>
            </div>
            <div class="item">
                <span class="tips">入离时间：</span>
                <span>15:00 后入住，12:00 前退房</span>
            </div>
            <div class="item">
                <span class="tips">预订时长：</span>
                <span>随时可预订,最少预订1天, 最多预订天数不限</span>
            </div>
        </div>
    </div>

    <div class="foot-bar">
        <div class="price">
            ￥60
        </div>
        <div class="btn">
            <a href="confirm.html">立即预定</a>
        </div>
    </div>
</body>

</html>
<script src="./assets/js/swiper-bundle.min.js"></script>
<script>
    var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        autoplay: true,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
    });
</script>